<template>
  <div class="mobile-container">
    <van-cell-group>
      <van-field v-model="account" label="用户名" type="text" placeholder="请输入用户名" />
      <van-field v-model="password" type="password" label="密码" placeholder="请输入密码" />
    </van-cell-group>
    <van-button type="primary" size="large" @click="login">登陆</van-button>
    <van-button type="info" size="large" @click="register">注册</van-button>
  </div>
</template>

<script lang="ts">
import { Vue, Options } from "vue-class-component";
import { ref } from "vue";
import {useRouter} from "vue-router";
import { Toast } from "vant";
import { Notify } from "vant";
import {useStore} from "vuex";
import {SingletonState} from "../../../interface";

export default {
  setup(){

    const store = useStore();
    const router=useRouter();
    return{
      store,router
    }
  },
  data(){
    return{
       account:'',
     password:'',
    }
  },
  methods:{
    login(){
      if ((this as any).account == "" || (this as any).password == "") {
        Notify("账号 或 密码 为空");
        Toast("账号 或 密码 为空");
      }
      fetch("api/authorize/self/ap",
          {
            headers:{
              "content-type":"application/json"
            },
            method: "POST",
            body: JSON.stringify({account: (this as any).account, password:(this as any).password})

          }).then(res=>res.json()).then(json=>{
        console.log(json)
        sessionStorage['login']=SingletonState.logined;
        const store = (this as any).store;
        store.commit('logined');
        (this as any).router.push({path:"/owner"});
      })
      console.log((this as any).number);
    },
    register(){
      (this as any).router.push({path:"/register"});
    }
  },
}
</script>

<style scoped>
.mobile-container {
  margin: 0 10px;
}
</style>